import React , { ErrorInfo } from 'react';

interface E {
  hasError?: boolean
}

export default class ErrorBoundary extends React.Component<E, E> {
  constructor(props: E) {
    super(props);
    this.state = { hasError: false };
  }

  // 错误： 1. 数据  2. 页面/组件错了（上线之后）

  // 新声明周期 静态方法， 处理页面（组件）级别的错误
  static getDerivedStateFromError(error: ErrorEvent) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  // 老声明周期
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // 你同样可以将错误日志上报给服务器
    // logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) { // 说明页面出错误了
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.
        <img src={require('@/assets/error1.jpeg')} alt="" />
      </h1>;
    }

    return this.props.children;
  }
}
